<template>
    <div class="mask" v-if="showMask" @touchmove.stop="changeMove" @click.stop="close" >
        <!--<mt-spinner v-show="isShow" type="fading-circle"></mt-spinner>-->
        <div ref="optCont" class="container">
            <ul  class="li-cont">
                <li v-for="(item,index) in dataList" :optionItem="item" @click.stop="handleClick(index,item.c_lea_unit_name,item.c_lea_unit_name)" :key="item.unit" :class='{"checked":index === checked}'>{{item.c_lea_unit_name}}</li>
            </ul>
        </div>

    </div>
</template>
<script>
import Vue from 'vue'
import { Spinner } from 'mint-ui';
import dropDown from './dropOption'
Vue.component(Spinner.name, Spinner);
import Bus from '@/common/js/vueBus'
export default {
  data(){
      return{
          value:"",
          checked:0,
          show:false,
          scrollTop:0,
      }
  },
  computed:{

  },
  props:{
    showMask:{
        type:Boolean,
        default:false
    },
    dataList:{
        type:Array
    },
    typeLeader:{
    	type:String,
    	default:"1"
    }
  },
  watch:{
    showMask:function(newVal){
        if (newVal) {
            var self = this;
            console.log('scroll');
            Vue.nextTick(function(){
                console.log(self.$refs.optCont);
                self.$refs.optCont.scrollTop = self.scrollTop;
            })
        }


    }
  },
  components:{
    dropDown
  },
  mounted:function(){
      var self = this;
      console.log(this.dataList,'dataList');
      Bus.$on("clearCheckedUnit",function(){
          self.checked = 0;
          self.$emit('returnChecked',"全部","clear");

      })
  },
  methods:{
      changeMove:function(e){
          console.log(e);
          e.stopPropagation();

      },
      scroll:function(){
          console.log('scroll');
      },
      handleClick:function(index,val,label){
        var self = this;
        self.checked = index;
        setTimeout(function(){
            self.$emit("update:showMask",false);
            self.$emit('returnChecked',val,label);
        },100)
        self.scrollTop = self.$refs.optCont.scrollTop;
      },
      close:function(){
          console.log('close');
          this.$emit("update:showMask",false)
      }
  }
}
</script>
<style scoped>
.mask{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index:1000;
}
.mask .container{
    background-color:#fff;
    height:8rem;
    width:6rem;
    /*overflow: hidden;*/
    /*overflow-y:auto;*/
    overflow-y:scroll;
    -webkit-overflow-scrolling : touch;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
    border-radius: 0.3rem;
}
.mask .container::-webkit-scrollbar{
  display: none;
}
.mask .li-cont{
    width: 80%;
    margin: auto;
    /* font-weight: 600; */
    font-size: 0.32rem;
    line-height: 3;
    margin-top: 0.5rem;
}
.mask .checked{
    color:#26a2ff;
}
</style>

             
             
             
             
